<template>
  <div>
    <div v-if="origin === 'order'" class="waybillstyle">
      <span style="font-size: 14px;">运单号 : </span>
      <el-select v-model="WaybillValue" placeholder="请选择" @change="WaybillSelectChanged" style="min-width:230px">
        <el-option v-for="item in WaybillListData" :key="item.WaybillId" :label="item.WaybillNo" :value="item.WaybillId">
        </el-option>
      </el-select>
    </div>
    <div class="wrapper" id="container" />
  </div>

</template>
 
<script>
// 绘制线路需要的坐标
var lineArr = [
  [116.478935, 39.997761],
  [108.983569, 34.285675],
  [103.85094, 35.987496],
  [106.205794, 38.458831],
  [111.761777, 40.875595],
];
import { reportGpsListFn } from "@/api/waybill";
import {
  detailWaybillList
} from "@/api/orderForm";
export default {
  name: "waybillMap",
  data() {
    return {
      firstArr: [116.478935, 39.997761], // 中心点/初始坐标
      endArr:[],
      lineArr: [[]],
      // 运单编号列表
      WaybillListData: [],
      WaybillValue: "",//选择
    };
  },
  props: ["id", "origin"],
  created() {

  },
  mounted() {
    this.getNode()
    setTimeout(() => {
      this.initMap(); // 异步加载（否则报错initMap is not defined）
    }, 1000);
  },

  methods: {
    // 初始化地图
    initMap() {
      var that = this;
      this.map = new AMap.Map("container", {
        resizeEnable: false, // 窗口大小调整
        center: this.firstArr, // 中心 firstArr: [116.478935, 39.997761],
        zoom: 4,
        // zoomEnable:false,
        scrollWheel: true,
      });
      // 添加maker
      if (this.endArr) {
        this.marker = new AMap.Marker({
          map: this.map,
          position: this.endArr,
          icon: "https://webapi.amap.com/images/car.png",
          offset: new AMap.Pixel(-26, -13), // 调整图片偏移
          autoRotation: true, // 自动旋转
          angle: 90, // 图片旋转角度
        });
      }

      that.initroad();
    },
    // 初始化轨迹
    initroad() {
      // 绘制路过的路线
      this.polyline = new AMap.Polyline({
        map: this.map,
        path: this.lineArr,
        showDir: true,
        strokeColor: "#5083FF", // 线颜色--浅蓝色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 8, // 线宽
        // strokeStyle: "solid"  //线样式
        lineJoin: "round", // 折线拐点的绘制样式
      });
      this.map.setFitView(); // 合适的视口
    },
    // 调用运单号的接口
    waybillListpage() {
      var param = {
        id: this.id
      }
      detailWaybillList(param).then((res) => {
        if (res.code == "10000") {
          var res = res.data
          if (res != null) {
            this.WaybillListData = res
            this.WaybillValue = res[0]
            this.WaybillNode(this.WaybillValue.WaybillId)
          }
        }
      })
    },
    getNode() {
      if (this.origin === "order") {
        this.waybillListpage()
      } else {
        // reportGpsListFn({
        //   waybill_id: this.id,
        //   order_id: "",
        // }).then((res) => {
        //   if (res && res.code === 10000 && res.data) {
        //     this.lineArr = []
        //     res.data.forEach((item) => {
        //       if (item.longitude && item.latitude) {
        //         this.lineArr.push([
        //           item.longitude,
        //           item.latitude,
        //         ]);
        //       }
        //     });
        //     this.firstArr = this.lineArr[0];
        //     this.endArr=this.lineArr[this.lineArr.length-1]
        //     this.initMap();
        //   }
        // });
        this.WaybillNode(this.id);
      }
    },
    WaybillNode(id) {
      reportGpsListFn({
        waybill_id: id,
        order_id: "",
      }).then((res) => {
        if (res && res.code === 10000 && res.data) {
          this.lineArr = []
          res.data.forEach((item) => {
            if (item.longitude && item.latitude) {
              this.lineArr.push([
                item.longitude,
                item.latitude,
              ]);
            }
          });
          this.firstArr = this.lineArr[0];
          this.endArr=this.lineArr[this.lineArr.length-1]
          this.initMap();
        }
      });
    },
    WaybillSelectChanged(value) {
      // 选中后将数据赋值給
      this.WaybillNode(value)
    }
  },
};
</script>
 
<style lang="scss" scoped>
.waybillstyle {
  width: 100%;
  padding: 10px 0px 10px 20px;
}
.wrapper {
  width: 100%;
  height: 90vh;
}
</style>